<template>
  <div class="district_list table-theme">
    <div class="top-menu">
      <div class="menu-left"></div>
      <div class="menu-right">
        <refresh-button @refresh="refreshPage"></refresh-button>
        <search-view
          :option="searchOption"
          @value="goSearch"
          @clear="refreshPage"
        ></search-view>
      </div>
    </div>
    <p class="data-number">总数据数：{{ total }}</p>
    <el-table :data="list" border>
      <el-table-column
        label="序号"
        align="center"
        prop="area_id"
      ></el-table-column>
      <el-table-column
        label="区域"
        align="center"
        prop="area_name"
      ></el-table-column>
      <el-table-column
        label="主线费用"
        align="center"
        prop="start_cost"
      ></el-table-column>
      <el-table-column
        label="支线费用"
        align="center"
        prop="send_price"
      ></el-table-column>
      <el-table-column label="最低价格" align="center" prop="min_cost"></el-table-column>
      <el-table-column
        label="包装费"
        align="center"
        prop="packing_price"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="onOpenDialog(scope.row)">编辑费用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="init"
        :current-page="page"
        :page-size="limit"
      ></el-pagination>
    </div>
    <el-dialog title="编辑费用" :visible.sync="is_dialog" center :modal-append-to-body="false" width="500px" @close="onClose('costForm')">
			<el-form :model="costForm" :rules="costFormRules" ref="costForm" label-width="120px">
				<el-form-item label="主线费用:" prop="start_cost">
					<el-input placeholder="请输入主线费用" v-model.trim="costForm.start_cost">
                        <i slot="suffix">元</i>
                    </el-input>
				</el-form-item>
            <el-form-item label="支线费用:" prop="send_price">
					<el-input placeholder="请输入支线费用" v-model.trim="costForm.send_price">
                        <i slot="suffix">元</i>
                    </el-input>
				</el-form-item>
          <el-form-item label="最低价格:" prop="min_cost">
					<el-input placeholder="请输入最低价格" v-model.trim="costForm.min_cost">
                        <i slot="suffix">元</i>
                    </el-input>
				</el-form-item>
                <el-form-item label="包装费:" prop="packing_price">
					<el-input placeholder="请输入包装费" v-model.trim="costForm.packing_price">
                        <i slot="suffix">元</i>
                    </el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="onClose('costForm')">取 消</el-button>
				<el-button type="primary" @click="onSubimt('costForm')">确 定</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    layerid: {
      type: String,
      default: "",
    },
    parent_id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      total: 0,
      list: [],
      page: 1,
      limit: 20,
      searchOption: [
        {
          value: 0,
          label: "区域",
        },
      ],
      classSelect: 0,
      selectContent: "",
      is_dialog:false,
      costForm:{
          area_id:'',
          start_cost:'',
          send_price:'',
          packing_price:'',
          min_cost:''
      },
      costFormRules:{
          start_cost: [{ required: true, message: "必填项不能为空" }],
          send_price: [{ required: true, message: "必填项不能为空" }],
          packing_price: [{ required: true, message: "必填项不能为空" }],
          min_cost: [{ required: true, message: "必填项不能为空" }],
      }
    };
  },
  created () {
      this.init(1)
  },
  methods: {
    init(e) {
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
        parent_id:this.parent_id
      };
      if (this.classSelect === 0 && this.selectContent !== "") {
        data.keyword = this.selectContent;
      }
      this.$http(this.$ApiList.AreaList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    refreshPage() {
      this.classSelect = 0;
      this.selectContent = "";
      this.page = 1;
      this.init();
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    onOpenDialog(row){
        const { area_id,start_cost,send_price,packing_price,min_cost } = row
        this.is_dialog = true
        this.costForm.area_id = area_id
        this.costForm.start_cost = start_cost
        this.costForm.send_price = send_price
        this.costForm.packing_price = packing_price
        this.costForm.min_cost = min_cost
    },
    onSubimt(formName){
        this.$refs[formName].validate((valid)=>{
            if(valid){
                this.$http(this.$ApiList.UpdateCost,this.costForm).then(res=>{
                    this.is_dialog = false
                    this.$message.success(res.datas)
                    this.$refs[formName].resetFields()
                    this.init(this.page)
                })
            }
        })
    },
    onClose(formName){
        this.is_dialog = false
        this.$refs[formName].resetFields()
    }
  },
};
</script>
<style lang="scss" scoped>
.district_list {
    width: 100%;
  padding: 10px 20px;
}
</style>